<template>
  <div class="ooo">
    <el-table :data="arr" style="width: 100%" height="360">
      <template>
        <el-table-column prop="bianhao" label="编号" width="100">
        </el-table-column>
      </template >
      <el-table-column prop="username" label="车牌号" width="100">
      </el-table-column>

      <el-table-column prop="income" label="停车位">
      </el-table-column>

      <el-table-column prop="createTime" label="入场时间">
      </el-table-column>

      <!-- <el-table-column prop="address" label="出场时间">
    </el-table-column> -->

      <el-table-column prop="pay" label="金额" width="100">
      </el-table-column>

      <el-table-column prop="money" label="支付方式">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <button @click="deladd(scope.row.id)">删除</button>
        </template>
      </el-table-column>


    </el-table>
  </div>
</template>

<script>
import { deleteByIdApi } from '../../../api/ParkingApi'
export default {
  props: ['arr'],
  data() {

    return {

    }
  },
  methods: {
    deladd(id) {
      // 删除逻辑，发送请求把id传送给后端，后端删除逻辑，然后通知前端，前端刷新表格
      // 删除，批量删除，添加，修改，请求都不用返回数据，只需要后台通知我们删除成功就可以。
      // 删除操作之后，我们从新在查询一次就ok了。
      // 发送请求 传递id值
      deleteByIdApi({ id: id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$emit('initHome')//刷新表格
        }
      })

    }

  }
}
</script>

<style lang="less">
// .el-table {
//   height: 330px;
//   margin-bottom: 10px;
//   overflow: auto
// }
.ooo {
  text-align: center;
  margin-top: -25px;
  overflow: auto;
  height: 420px;
  width: 100%;
}
</style>